import { Table } from 'antd';
import React, { useEffect, useState } from 'react';
import ObjectInfo from "./ObjectInfo";

const MyTable = props => {

    const { 
        dispatch = () => { }, className = '', data = [], isMobile = false, 
        MOtableCols = [], detailArgs = {}, newFields = [], loading, currentPage
    } = props;
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [columns, setColumns] = useState([]);

    const TODetail = (event, item, record) => {
        const { type, payload } = item.toDetail;
        event.preventDefault();
        if (payload) { payload.record = record }
        dispatch({ type, payload: payload });
    }

    const MOcolumns = () => {
        console.log("MOcolumns ===>> is run!")
        const columns = [];
        const renderTh = (item, i) => {
            const th = {
                key: i, title: item.text, dataIndex: item.dataIndex, ellipsis: true, width: item.width,
                render: item.render || ''
            }
            if (item.toDetail) {
                th.render = (field, record) => (
                    <a href="#" onClick={(event) => TODetail(event, item, record)}>
                        {item.render ? item.render(field, record) : field}
                    </a>
                );
            }

            return th
        }

        MOtableCols.forEach((item, i) => {
            if (isMobile) {
                !item.isHidden
                    && columns.push(renderTh(item, i));
            }
            else {
                // console.log("==>> MOtableCols item", item)
                columns.push(renderTh(item, i));
            }
        })

        return columns;
    };

    const dataAdapter = (data) => {
        // console.log("====>> dataAdapter", data)
        if (data instanceof Array) {
            data.forEach((item, i) => {
                newFields.forEach(field => {
                    item[field.name] = field.handle(item);
                })
            })

            return true;
        }
        console.error("需要Array类型数据！");
        return [];
    }

    const rowSelection = {

        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => { // _:占位符
            // console.log(`selectedRows:`, selectedRows, selectedRowKeys, checkedRows);
            setSelectedRowKeys(selectedRowKeys);
            selectedRows instanceof Array
                && dispatch({
                    type: 'fileManage/updateCheckedRows',
                    payload: selectedRows
                })
        },
    }
    
    const renderHTML = () => {
        if (currentPage) {
            if (currentPage == 'detail') {
                return <ObjectInfo detailArgs={detailArgs} {...props} />
            }
            // return <MOUpdate detailArgs={configs.DETAIL_ARGS} {...props} />
        }
        return (
            <Table
                className={className}
                rowSelection={rowSelection}
                columns={columns}
                dataSource={data}
                loading={loading}
            />
        );
    }

    useEffect(() => {
        console.log('===.>> MyTable is run!', data)
        dispatch({ type: 'fileManage/methodAdapter', method: 'query', payload: {} })
    }, [])

    useEffect(() => {
        // console.log('==>> data is change!', data)
        setSelectedRowKeys([]);
        newFields.length && dataAdapter(data);
        MOtableCols.length > 0 && setColumns(MOcolumns())
    }, [data])

    return renderHTML();
}

export default MyTable;